<template>
	<div style="text-align: center;" ref="scroll" id="all">
		<!-- <div style="display: inline-block;border-bottom:0.0625rem solid  #e0e2e3;" class="header">
			<div style="display: inline-block;width: 10%;float: left;line-height: 100%;height: 100%;vertical-align: top;">
				<img src="../../img/header.png" style=" width: 100%;">
			</div>
			<span style="font-size: 2.5rem;font-weight: bold;display: inline-block;float: left;margin-top: 3.5rem;">高考志愿智能填报系统</span>
			
		</div> -->
		<div class="section">
			<div style="width: 40%;margin: auto;margin-top: 18rem;background-color: #f1f3f4;">
				<div style="display: inline-block;width: 50%;height: 36rem;vertical-align:top;margin-top: 4rem;">
					<img src="../../img/3.jpg" style="width: 35rem;"/>
				</div>
				<div style="display: inline-block;width: 45%;height: 21.875rem;">
					<h3 style="margin-top: 5.5rem;">请选择对应的登录入口</h3>
					<el-button  class="btn" style="margin-top: 3rem;background-color: coral;color: white;" @click="zj()">专家登录</el-button><br/>
					<el-button type="primary" class="btn" style="margin-top: 2.5rem;" @click="dialogVisible=true">学生登录</el-button>
				</div>
			</div>
		</div>
		<!-- <div class="div3" >
			<div style="font-size: 12px;color: gray;display: inline-block;width: 47%;border-bottom: 1px solid gray;line-height: 50px;height: 50px;text-align: left;">
				<a target="_blank" href="http://www.sneea.cn/" style="color: gray;">陕西省教育考试院</a> <a target="_blank" href="http://www.sneac.com/" style="margin-left: 20px;color: gray;">陕西招生考试信息网</a><a target="_blank" href="https://gaokao.chsi.com.cn/" style="margin-left: 20px;color: gray;">阳光高考|国家智慧教育公告服务平台</a><a target="_blank" href="https://yz.chsi.com.cn/" style="margin-left: 20px;color: gray;">中国研究生招生信息网</a>
			</div></br>
			<p style="color: gray;font-size: 12px;line-height: 20px;display: inline-block;text-align: left;width: 47%;">门道生涯 | 你与更精彩的自己，只差一道门的距离！<span @click="togxb()" style="cursor: pointer;margin-left: 20px;">陕ICP备19005241号-2</span> 
					<img src="../../img/beian.png" style="line-height: 20px;height: 20px; display: inline-block;vertical-align:top;margin-left: 20px;"/>
				<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61019002002070" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">陕公网安备 61019002002070号</p></a>
				<span style="margin-left: 20px;">联系电话：177 9120 5273</span>
			</p>
		</div> -->
		
		<el-dialog
		  :visible.sync="dialogVisible"
		  width="400px"
		  style="margin-top: 11rem;"
		  >
		  <el-form label-width="80px" ref="neweditForm" style="margin: auto;">
			  <div style="width: 400px;margin: auto;">
				  <span style="width: 90%;display: inline-block;text-align: left;">
					  账<span style="margin-left: 1em;"></span>号：<el-input v-model="zh" style="width: 230px;"></el-input>
				  </span></br>
				  <span style="width: 90%;display: inline-block;text-align: left;">
					  验证码：<el-input v-model="yzm" style="width: 120px;margin-top: 1.25rem;"></el-input>
					  <el-button v-show="show" style="color: red;margin-left: 0px;border: none;" id="hq"
					  	@click="stuyz()">获取验证码</el-button>
					  						<el-button v-show="!show"
					  							style="color: red;margin-left: 10px;border: none;">{{count}}s
					  						</el-button>
				  </span>
			  </div>
		  			</el-form>
		    <el-button type="primary" style="margin-top: 1.25rem;width: 80px;margin-left: 2rem;" @click="stulogin">登录</el-button>
		</el-dialog>
	</div>
</template>

<script>
	import { request } from "../../util/request.js"
	
	
	export default {
	        data() {
	            return {
					timer:null,
					count: '',
				    show:true,
				    yzm:'',
				    url:'https://beian.miit.gov.cn/',
	                dialogVisible:false,
				    zh:'',
				    passwd:'',
	            }
	        },
			methods:{
				stuyz(){
					const TIME_COUNT = 60
					if(this.zh===''||this.zh===null){
						this.$message({
							message:"账号不能为空！",
							type:'error'
						})
					}else{
						request({
							method: 'POST',
							url: 'student/stuYz',
							data:this.zh
						}).then(msg => {
							if (msg.code == 0 || msg.code == 200) {
								if (!this.timer) {
									this.count = TIME_COUNT;
									this.show = false;
									this.timer = setInterval(() => {
										if (this.count > 0 && this.count <= TIME_COUNT) {
											this.count--;
										} else {
											this.show = true;
											clearInterval(this.timer);
											this.timer = null;
										}
									}, 1000)
								}
								this.$message({
									message: msg.msg,
									type: "success"
								});
							} else {
								this.$message({
									message: msg.msg,
									type: 'error'
								});
							}
						})
					}
				},
				togxb() {
				window.open(this.url)
				},
				zj(){
					this.$router.push({
						path:"SignIn"
					})
				},
				stulogin(){
					if(this.zh==null||this.zh==''||this.yzm==null||this.yzm==''){
						this.$message({
							message: '账号和验证码不能为空!',
							type: 'error'
						});
					}else{
						request({
							method: 'POST',
							url: 'student/stulogin',
							params:{
								phone:this.zh,
								code:this.yzm
							}
						}).then(msg => {
							if (msg.code == 0 || msg.code == 200) {
								this.$message({
									message: "登录成功！",
									type: "success"
								});
								// console.log("进来了")
								sessionStorage.setItem(msg.data.tokenInfo.tokenName, msg.data.tokenInfo.tokenValue)
								sessionStorage.setItem('stu', JSON.stringify(msg.data.user))
								this.$router.push({
									path: 'stuHome'
								});
							} else {
								this.$message({
									message: msg.msg,
									type: 'error'
								});
							}
						})
					}
				}
			},
			created() {
				
			}
		}
</script>

<style>
	/* #app{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
	} */
	#all{
		/* overflow-x:hidden;
		overflow-y:auto;
		margin: 0;
		padding: 0;
		width: 100%; */
		font-size: 15px;
	}
	.div3{
		width: 100%;
		margin: auto;
		/* height: 50px; */
		text-align: center;
		margin-top: 30px;
		background-color: #f1f3f4;
	}
/* 	#all .sb .el-form-item__content{
		margin: auto;
	} */
/* 	.wrapper .btn{
		width: 12.5rem;
		height: 3.125rem;
	} */
/* html,body{height: 99%;width: 99%;}
	        .wrapper{display: flex;flex-direction: column;min-height: 100%;max-width: 100%;}
	        .header{flex: 0;}
	        .section{flex: 1;}
	        .div3{flex: 0;} */
</style>
